<!-- 免密登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image :src="logo"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title">请选择登录方式</text>
		<!-- 快捷登录框 当url带参数时有效 -->
		<template v-if="['apple', 'weixin', 'weixinMobile'].includes(type)">
			<text class="tip">将根据第三方账号服务平台的授权范围获取你的信息</text>
			<view class="quickLogin">
				<image
					v-if="type !== 'weixinMobile'"
					@click="quickLogin"
					:src="imgSrc"
					mode="widthFix"
					class="quickLoginBtn"
				></image>
				<button v-else type="primary" open-type="getPhoneNumber" @getphonenumber="quickLogin" class="uni-btn">
					微信授权手机号登录
				</button>
				<uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
			</view>
		</template>
		<template v-else>
			<text class="tip">未注册的账号验证通过后将自动注册</text>
			<view class="phone-box">
				<view @click="chooseArea" class="area">+86</view>
				<uni-easyinput
					:focus="focusPhone"
					@blur="focusPhone = false"
					class="input-box"
					type="number"
					:inputBorder="false"
					v-model="phone"
					maxlength="11"
					placeholder="请输入手机号"
				/>
			</view>
			<uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
			<button class="uni-btn" type="primary" @click="toSmsPage">获取验证码</button>
		</template>
		<!-- 固定定位的快捷登录按钮 -->
		<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
	</view>
</template>

<script>
let currentWebview; //当前窗口对象
import config from "@/uni_modules/uni-id-pages/config.js";
import mixin from "@/uni_modules/uni-id-pages/common/login-page.mixin.js";
export default {
	mixins: [mixin],
	data() {
		return {
			type: "", //快捷登录方式
			phone: "", //手机号码
			focusPhone: false,
			logo: "/static/logo.png"
		};
	},
	computed: {
		async loginTypes() {
			//读取配置的登录优先级
			return config.loginTypes;
		},
		isPhone() {
			//手机号码校验正则
			return /^1\d{10}$/.test(this.phone);
		},
		imgSrc() {
			//大快捷登录按钮图
			return this.type == "weixin"
				? "/uni_modules/uni-id-pages/static/login/weixin.png"
				: "/uni_modules/uni-id-pages/static/app-plus/apple.png";
		}
	},
	async onLoad(e) {
		//获取通过url传递的参数type设置当前登录方式，如果没传递直接默认以配置的登录
		let type = e.type || config.loginTypes[0];
		this.type = type;

		// console.log("this.type: -----------",this.type);
		if (type != "univerify") {
			this.focusPhone = true;
		}
		this.$nextTick(() => {
			//关闭重复显示的登录快捷方式
			if (["weixin", "apple"].includes(type)) {
				this.$refs.uniFabLogin.servicesList = this.$refs.uniFabLogin.servicesList.filter((item) => item.id != type);
			}
		});
		uni.$on("uni-id-pages-setLoginType", (type) => {
			this.type = type;
		});
	},
	onShow() {
		// #ifdef H5
		document.onkeydown = (event) => {
			var e = event || window.event;
			if (e && e.keyCode == 13) {
				//回车键的键值为13
				this.toSmsPage();
			}
		};
		// #endif
	},
	onUnload() {
		uni.$off("uni-id-pages-setLoginType");
	},
	onReady() {
		// 是否优先启动一键登录。即：页面一加载就启动一键登录
		//#ifdef APP-PLUS
		if (config.loginTypes.includes("univerify") && this.type == "univerify") {
			uni.preLogin({
				provider: "univerify",
				success: () => {
					const pages = getCurrentPages();
					currentWebview = pages[pages.length - 1].$getAppWebview();
					currentWebview.setStyle({
						top: "2000px" // 隐藏当前页面窗体
					});
					// this.type == this.loginTypes[1]
					// console.log('开始一键登录');
					this.$refs.uniFabLogin.login_before("univerify");
				},
				fail: (err) => {
					console.log(err);
					if (config.loginTypes.length > 1) {
						this.$refs.uniFabLogin.login_before(config.loginTypes[1]);
					} else {
						uni.showModal({
							content: err.message,
							showCancel: false
						});
					}
				}
			});
		}
		//#endif
	},
	methods: {
		showCurrentWebview() {
			// 恢复当前页面窗体的显示 一键登录，默认不显示当前窗口
			currentWebview.setStyle({
				top: 0
			});
		},
		quickLogin(e) {
			let options = {};

			if (e.detail?.code) {
				options.phoneNumberCode = e.detail.code;
			}

			if (this.type === "weixinMobile" && !e.detail?.code) return;

			this.$refs.uniFabLogin.login_before(this.type, true, options);
		},
		toSmsPage() {
			if (!this.isPhone) {
				this.focusPhone = true;
				return uni.showToast({
					title: "手机号码格式不正确",
					icon: "none",
					duration: 3000
				});
			}
			if (this.needAgreements && !this.agree) {
				return this.$refs.agreements.popup(this.toSmsPage);
			}
			// 发送验证吗
			uni.navigateTo({
				url: "/uni_modules/uni-id-pages/pages/login/login-smscode?phoneNumber=" + this.phone
			});
		},
		//去密码登录页
		toPwdLogin() {
			uni.navigateTo({
				url: "../login/password"
			});
		},
		chooseArea() {
			uni.showToast({
				title: "暂不支持其他国家",
				icon: "none",
				duration: 3000
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/uni_modules/uni-id-pages/common/login-page.scss";

@media screen and (min-width: 690px) {
	.uni-content {
		height: 350px;
	}
}

.uni-content,
.quickLogin {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
}

.phone-box {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
}

.area {
	position: absolute;
	left: 10px;
	z-index: 9;
	top: 12px;
	font-size: 14px;
}

.area::after {
	content: "";
	border: 3px solid transparent;
	border-top-color: #000;
	top: 12px;
	left: 3px;
	position: relative;
}

/* #ifdef MP */
// 解决小程序端开启虚拟节点virtualHost引起的 class = input-box丢失的问题 [详情参考](https://uniapp.dcloud.net.cn/matter.html#%E5%90%84%E5%AE%B6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E6%9C%BA%E5%88%B6%E4%B8%8D%E5%90%8C-%E5%8F%AF%E8%83%BD%E5%AD%98%E5%9C%A8%E7%9A%84%E5%B9%B3%E5%8F%B0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98)
.phone-box ::v-deep .uni-easyinput__content,
	/* #endif */
	.input-box {
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
	flex: 1;
	padding-left: 45px;
	margin-bottom: 10px;
	border-radius: 0;
}

.quickLogin {
	height: 350px;
	align-items: center;
	justify-content: center;
}

.quickLoginBtn {
	margin: 20px 0;
	width: 450rpx;
	/* #ifndef APP-NVUE */
	max-width: 230px;
	/* #endif */
	height: 82rpx;
}

.tip {
	margin-top: -15px;
	margin-bottom: 20px;
}

@media screen and (min-width: 690px) {
	.quickLogin {
		height: auto;
	}
}
</style>
